<template>
	<div class="model-sale-info">
		<div class="main_content">
			<div class="main_content_title">
				<div class="left">
					<span>{{ propUpType === 'add' ? $t('publicBtn.add') : propUpType === 'edit' ? $t('publicBtn.edit') :
						$t('publicBtn.detail') }}</span>
					<template v-for="(item, index) in $route.meta.title">
						<span v-if="languageId === item.langId">{{ item.name }}</span>
					</template>
				</div>
				<div class="right" />
			</div>
			<div class="main_content_con">
				<el-form ref="info" :model="info" :rules="rules" label-width="95px" class="demo-ruleForm">
					<div class="content_info" v-if="propUpType !== 'detail'">
						<el-row :gutter="24">
							<el-col :span="10">
								<el-form-item :label="$t('formLabel.selectModel')" prop="modelId">
									<el-input v-if="propUpType === 'add'" :placeholder="$t('placeholderTip.pSelect')"
										:value="info.modelName" @focus="getFrame">
										<el-button slot="append" icon="el-icon-search" @click="getFrame"></el-button>
									</el-input>
									<el-input v-if="propUpType === 'edit'" :value="info.modelName">
									</el-input>
								</el-form-item>
							</el-col>
							<el-col :span="10">
								<el-form-item :label="$t('publicFormLabel.sort')" prop="sort">
									<el-input v-model="info.sort" />
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="24">
							<el-col :span="10">
								<el-form-item :label="$t('publicFormLabel.brandName')">
									<el-input disabled :value="info.brandName" />
								</el-form-item>
							</el-col>
							<el-col :span="10">
								<el-form-item :label="$t('publicFormLabel.seriesName')">
									<el-input disabled :value="info.seriesName" />
								</el-form-item>
							</el-col>

						</el-row>
						<el-row :gutter="24">
							<el-col :span="10">
								<el-form-item :label="$t('publicFormLabel.carYear')">
									<el-input disabled :value="info.carYear" />
								</el-form-item>
							</el-col>
							<el-col :span="10">
								<el-form-item :label="$t('publicFormLabel.guidePrice')">
									<el-input disabled :value="info.guidancePrice">
										<template slot="append">{{ $t('text.priceUnit') }}</template>
									</el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="24">
							<el-col :span="10">
								<el-form-item :label="$t('formLabel.salePrice')" prop="price">
									<el-input v-model="info.price">
										<template slot="append">{{ $t('text.priceUnit') }}</template>
									</el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="24">
							<el-col :span="10">
								<el-form-item :label="$t('formLabel.carImage')" prop="image">
									<div class="avatar-uploader">
										<upload-img customsrc="true" :defsrc="info.image"
											:on-success="function (res, file) { return handleAvatarSuccess(res, file, info, 'image') }">
											<i class="el-icon-plus avatar-uploader-icon" />
										</upload-img>
									</div>
									<div class="tipInfo">（{{ $t('text.size') }}:1920*1080）</div>
									<div v-if="info.image" class="deleteImg" @click.stop="deleteImg(info, 'image')">
										<img src="@/assets/images/close.png">
									</div>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="24">
							<el-col :span="14">
								<el-form-item :label="$t('formLabel.isSnventory')">
									<el-radio-group v-model="info.isStock" @change="copyValue('list', 'isStock', info.isStock)">
										<el-radio :label=1>{{ $t('text.have') }}</el-radio>
										<el-radio :label=0>{{ $t('text.notHave') }}</el-radio>
									</el-radio-group>
								</el-form-item>
							</el-col>
						</el-row>
					</div>
					<div class="content_info" v-else>
						<el-row :gutter="24">
							<el-col :span="10">
								<el-form-item :label="$t('formLabel.modelName')" prop="modelId">
									<el-input readonly :value="info.modelName">
									</el-input>
								</el-form-item>
							</el-col>
							<el-col :span="10">
								<el-form-item :label="$t('publicFormLabel.sort')" prop="sort">
									<el-input readonly v-model="info.sort" />
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="24">
							<el-col :span="10">
								<el-form-item :label="$t('publicFormLabel.brandName')">
									<el-input readonly :value="info.brandName" />
								</el-form-item>
							</el-col>
							<el-col :span="10">
								<el-form-item :label="$t('publicFormLabel.seriesName')">
									<el-input readonly :value="info.seriesName" />
								</el-form-item>
							</el-col>

						</el-row>
						<el-row :gutter="24">
							<el-col :span="10">
								<el-form-item :label="$t('publicFormLabel.carYear')">
									<el-input readonly :value="info.carYear" />
								</el-form-item>
							</el-col>
							<el-col :span="10">
								<el-form-item :label="$t('publicFormLabel.guidePrice')">
									<el-input readonly :value="info.guidancePrice">
										<template slot="append">{{ $t('text.priceUnit') }}</template>
									</el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="24">
							<el-col :span="10">
								<el-form-item :label="$t('formLabel.salePrice')">
									<el-input readonly v-model="info.price">
										<template slot="append">{{ $t('text.priceUnit') }}</template>
									</el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="24">
							<el-col :span="10">
								<el-form-item :label="$t('formLabel.carImage')" prop="image">
									<div class="avatar-uploader">
										<upload-img :preview="true" :defsrc="info.image" disabled />
									</div>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="24">
							<el-col :span="14">
								<el-form-item :label="$t('formLabel.isSnventory')">
									<el-radio-group v-model="info.isStock">
										<el-radio v-if="info.isStock === 1" :label=1>{{ $t('text.have') }}</el-radio>
										<el-radio v-if="info.isStock === 0" :label=0>{{ $t('text.notHave') }}</el-radio>
									</el-radio-group>
								</el-form-item>
							</el-col>
						</el-row>
					</div>
					<div class="footerBtn">
						<el-button @click="getCancle">{{ propUpType !== 'detail' ? $t('el.popconfirm.cancelButtonText') :
							$t('el.popconfirm.close') }}</el-button>
						<el-button v-if="propUpType !== 'detail'" type="primary" @click="addSubmitForm"
							v-loading.fullscreen.lock="fullscreenLoading">{{ $t('el.popconfirm.confirmButtonText') }}</el-button>
					</div>
				</el-form>
			</div>
		</div>
		<!-- 门店车型 -->
		<vehicleModel ref="vehicleModel"></vehicleModel>
	</div>
</template>
<script>
import {
	getMaxCarBranchModelInfo,
	setMaxCarBranchModelSave,
	setMaxCarBranchModelUpdate
} from '@/api/commercial-vehicle-manager'
import UploadImgSimple from '@/components/Upload/UploadImgSimple'
import vehicleModel from '@/components/store-vehicle-model'
import defaultSettings from '@/settings'
export default {
	name: 'modelSaleInfo',
	components: {
		vehicleModel,
		UploadImg: UploadImgSimple, //单张
	},
	data() {
		return {
			BASE_IMG: defaultSettings.BASE_IMG,
			info: {
				sort: '', //排序
				brandName: '', //品牌名称
				carYear: '', //年款
				guidancePrice: '', //指导价
				price: '',//	销售价格
				modelId: '', //车型id
				modelName: '', //车型名称
				seriesName: '', //车系名称
				image: '', //车辆图片
				isStock: 1,//库存 0：无 1：有
			},
			rules: {
				couponsRegular: [
					{
						required: true,
						message: this.$t('placeholderTip.enter'),
						trigger: 'blur'
					}
				],
				price: [
					{
						required: true,
						message: this.$t('placeholderTip.enter'),
						trigger: 'blur'
					}
				],
				sort: [
					{
						required: true,
						message: this.$t('placeholderTip.enter'),
						trigger: 'blur'
					},
					{
						required: true,
						pattern: /^[0-9]\d*$/,
						message: this.$t('placeholderTip.enter') + '(>=0)',
						trigger: 'blur'
					}
				],
				modelId: [
					{
						required: true,
						message: this.$t('placeholderTip.pSelect'),
						trigger: 'change'
					}
				],
				image: [
					{
						required: true,
						message: this.$t('placeholderTip.pUpload'),
						trigger: 'blur'
					}
				],
			},
			propUpType: '', // 'add' edit detail
			fullscreenLoading: false,
			pickerOptions: {
				disabledDate(time) {
					return time.getTime() < Date.now() - 8.64e7
				}
			}
		}
	},
	watch: {
		'info.image': function (val) {
			if (val) {
				// 清除 提报上传 校验
				let formField = this.$refs['info'].fields
				formField.map(i => {
					if (i.prop === 'image') {
						i.clearValidate()
						return false
					}
				})
			}
		},
	},
	computed: {
		languageId() {
			// 固定语种ID  1:中文  2:英文 3:俄文 4:乌语
			return this.$store.getters.languageId
		},
	},

	mounted() {
		window._vm = this
		this.propUpType = this.$route.query.propUpType
		if (this.$route.query.propUpType !== 'add') {
			this.getInfo(this.$route.query.id)
		}
	},
	created() { },
	activated() { },
	destroyed() { },
	methods: {
		// 清空校验
		getClearValidate() {
			if (this.$refs['info'] !== undefined) {
				this.$nextTick(() => {
					// 移除校验
					this.$refs['info'].clearValidate()
				})
			}
		},
		message(content) {
			var key = content.key
			this.info[key] = content.msg
		},
		deleteImg(tar, key, index) {
			tar[key] = ''
		},
		handleAvatarSuccess(res, file, tar, key, type, index) {
			if (res) {
				tar[key] = res.key
			}
		},

		getFrame() {
			this.$refs.vehicleModel.getOpen()
		},
		getvehicleModelId(tar) {
			var tar = JSON.parse(tar)
			if (tar) {
				this.info.brandName = tar.brandName
				this.info.carYear = tar.carYear
				this.info.guidancePrice = tar.guidancePrice
				this.info.seriesName = tar.seriesName
				this.info.modelId = tar.id //车型id
				this.info.modelName = tar.name
			}
		},
		// 提交
		async addSubmitForm() {
			try {
				await Promise.all([this.$refs['info'].validate()])
				var obj = JSON.parse(JSON.stringify(this.info))
				var params = {
					sort: obj.sort,
					modelId: obj.modelId,
					image: obj.image,
					price: obj.price,//	销售价格
					isStock: obj.isStock,//库存 0：无 1：有
				}
				this.fullscreenLoading = true
				if (this.propUpType === 'add') {
					setMaxCarBranchModelSave(params)
						.then(res => {
							if (res.code === 200) {
								this.$message({
									showClose: true,
									message: this.$t('text.addSucceedTip'),
									type: 'success'
								})
								this.fullscreenLoading = false
								this.getCancle()
							}
						})
						.catch(err => {
							this.fullscreenLoading = false
							console.log(err, 'err')
						})
				} else {
					params['id'] = obj.id
					setMaxCarBranchModelUpdate(params)
						.then(res => {
							if (res.code === 200) {
								this.$message({
									showClose: true,
									message: this.$t('text.editSucceedTip'),
									type: 'success'
								})
								this.fullscreenLoading = false
								this.getCancle()
							}
						})
						.catch(err => {
							this.fullscreenLoading = false
							console.log(err, 'err')
						})
				}
			} catch (error) {
				return false
			}
		},
		// 详情
		getInfo(id) {
			const loading = this.$loading({
				lock: true,
				text: this.$t('text.loading'),
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			})
			getMaxCarBranchModelInfo(id)
				.then(res => {
					if (res.code === 200) {
						this.info = res.data
						loading.close()
					}
				})
				.catch(err => {
					loading.close()
					console.log(err, 'err')
				})
		},

		// 取消
		getCancle() {
			this.$store.state.tagsView.visitedViews.splice(
				this.$store.state.tagsView.visitedViews.findIndex(
					item => item.path === this.$route.path
				),
				1
			)
			this.$router.go(-1)
		}
	}
}
</script>
<style lang="scss" scoped>
.model-sale-info {
	height: 100%;
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
	overflow: hidden;

	&>.main_content {
		width: 99.9%;
		height: 100%;

		&>.main_content_title {
			margin-bottom: 10px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}

		.main_content_con {
			height: calc(100% - 40px);
			width: 100%;
			display: inline-block;
			border: 1px solid #dfe6ec;
			padding: 20px;
			overflow: hidden;

			&>.el-form {
				width: 100%;
				height: 100%;

				&>.content_info {
					width: 100%;
					height: calc(100% - 50px);
					overflow: hidden;
					overflow-y: auto;

					.line {
						height: 1px;
						border: 1px solid #ebeef5;
					}

					.contentHtml {
						overflow: auto;
						border: 1px solid #e4e4e4;
						box-sizing: border-box;
						min-height: 80px;
						height: 100%;
					}
				}

				.footerBtn {
					width: 100%;
					display: flex;
					justify-content: center;
					padding-top: 10px;
				}
			}

			.cardBox {
				width: 104px;
				height: auto;
				float: left;
				position: relative;

				&>.name {
					text-align: center;
					color: #999;
					font-size: 12px;
				}
			}

			.el-button:hover,
			.el-button:focus {
				color: #000;
			}
		}
	}
}
</style>
